<template>
    <div class="container" :style="`width:calc(100vw - ${retrievingReleasWidth})`">
        <div class="containerBox" :style="`height:${newLeftAllTime.length*60+46}px`">
            <div class="toMoveBox">
                <div v-if="timePeriod=='now'||!dataDrog.length" class="timeLine" :style="`${dataDrog.length==0?(isRetrievingReleasing==='2'?'width:calc(100vw - 450px)':'width:calc(100vw - 207px)'):'width:calc(100% - 63px)'}`"></div>
                <div class="timeSticky">
                    <div class="timeStickyCover"></div>
                    <div class="timeStickyList" :class="`timeStickyList${timeindex}`" v-for="(timeItem,timeindex) in newLeftAllTime">
                        {{timeItem}}
                    </div>
                </div>
                <div v-if="!dataDrog.length" style="height:60px;display: flex;justify-content: center;align-items: center;position:sticky;top:0;background:#fff;box-shadow: 1.78px 1.78px 8.89px 0 rgba(12, 38, 140, 0.2);z-index:1000" :style="`width:calc(100vw - ${isRetrievingReleasing==='2'?'450px':'207px'})`">
                        <div style="display:flex;">
                            <div style="align-items: center;display: flex;">
                                <img style="width:20px;height:20px;" src="/src/assets/images/noPaiban.png" alt="">
                            </div>
                            <div style="padding:0 20px 0 8px;">暂无员工排班</div>
                            <div @click="goScheduling()" class="goScheduling">去排班</div>
                        </div>
                    </div>
                <div v-if="!dataDrog.length" style="position:absolute;z-index:998;width:calc(100vw - 378px);background:#fff;" :style="`width:calc(100vw - ${isRetrievingReleasing==='2'?'387px':'144px'})`">
                    <div v-for="(timeItem,timeindex) in newLeftAllTime" style="height:60px;border-top:1px solid #ddd;"></div>
                </div>
                <div v-for="(dataDrogItem,mindex) in dataDrog" class="dataDrogList">
                    <div class="dataDrogTitle">
                        <div style="display:flex;max-width:115px;align-items: center">
                            <div class="dataDrogName">{{dataDrogItem.employeeName}}</div>
                            <div style="display:flex">
                                <div class="dataDrogIcon" v-for="(iconItem,iconIndex) in dataDrogItem.schemeList" :style="`background:${iconItem.iconColor};margin-left:${iconIndex!=0?'-10':'0'}px;z-index:${99-iconIndex}`">{{iconItem.schemeIcon}}</div>
                            </div>
                        </div>
                    </div>
                    <div style="display:flex;" :class="`${'toMoveAll'+mindex}`">
                        <div v-for="(item,index) in dataDrogItem.reserveList" class="toMove" :class="`${'toMove'+mindex+index}`" :style="`height:${item.totalTime*30}px;top:${item.timeSlot*30+46}px;`">
                        <!-- <div v-for="(item,index) in dataDrogItem.dataDrogItem" class="toMove" :class="`${'toMove'+mindex+index}`" @touchstart="(e)=>{dataDrogTouch(e,index,mindex)}" @mousedown="(e)=>{dataDrogDown(e,index,mindex,item)}" :style="`height:${item.totalTime*30}px;top:${item.timeSlot*30+46}px;`"> -->
                            <el-popover
                                ref="popover"
                                placement="right-start"
                                popper-class="user-model-card"
                                :width="120"
                                trigger="click"
                                :show-arrow="false"
                                @hide="clickOutside(e,index,mindex,item,'0')"
                                :popper-options="modifiers(item.recordState)"
                                >
                                <div class="textBtnBox">
                                    <div class="textBtn textBtnSee isPointer" @click="editReservation(3,item)">查看</div>
                                    <div class="textBtn textBtnSee isPointer" v-if="[1,2].includes(item.recordState)" @click="editReservation(1,item)">编辑</div>
                                    <div class="textBtn textBtnSee isPointer" v-if="[2].includes(item.recordState)&&store.state.userInfo.info.roleList.includes('store_master')" @click="jumpPage(1,item)">核销</div>
                                    <div class="textBtn textBtnEdit isPointer" v-if="[3].includes(item.recordState)&&store.state.userInfo.info.roleList.includes('store_master')" @click="jumpPage(3,item)">审核</div>
                                    <div class="textBtn textBtnSee isPointer" v-if="[4].includes(item.recordState)" @click="jumpPage(2,item)">记录</div>
                                    <div class="textBtn textBtnReach isPointer" v-if="[1].includes(item.recordState)" @click="confirmPopup(e,index,mindex,item,'toPoint')">到店</div>
                                    <div class="textBtn textBtnCancel isPointer" v-if="[1].includes(item.recordState)" @click="confirmPopup(e,index,mindex,item,'cancellation')">取消</div>
                                </div>
                                <template #reference>
                                    <div @mouseup="(e)=>{getOperate(e,index,mindex,item)}" class="toMoveCard" :style="`background:${['','#F3FCF7','#F6F9FF','#FFF8F2','#F3F4F9','#F9F9F9'][parseFloat(item.recordState)]};`">
                                        <div class="toMoveLine" :style="`height:${item.totalTime*30}px;background:${['','#18BF5B','#5081FF','#FF6B00','#0C268C','#999999'][parseFloat(item.recordState)]};`"></div>
                                        <div class="toMoveContent" v-if="item.totalTime>1">
                                            <div class="toMoveName">
                                                <div class="two_line"  v-for="(projectItem,index) in item.reserveList">{{projectItem.projectName}}</div>
                                            </div>
                                            <div class="toMoveCustom">{{item.memberName}}</div>
                                        </div>
                                        <div class="toMoveContent" style="display:flex;" v-else>
                                            <div class="toMoveName2">
                                                <span v-for="(projectItem,index) in item.reserveList">{{projectItem.projectName}}</span>
                                            </div>
                                            <div class="toMoveCustom2">{{item.memberName}}</div>
                                        </div>
                                    </div>
                                </template>
                            </el-popover>
                        </div>
                    </div>
                    <div :style="`width:136px;position:absolute;z-index:0;`">
                        <div v-for="(numItem,sindex) in toMoveCells" class="toBgOther" :class="`${'toBg'+mindex+sindex}`"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="jsx">
    import { reactive,toRefs ,h,ref,nextTick,onActivated,onMounted,onBeforeUnmount,watch} from "vue";
    import {mapState, useStore} from "vuex";
    import {ElMessageBox} from "element-plus";
    import { passOrReject } from "@/api/reportForms"
    import moment from 'moment'
    import _ from 'lodash'
    import util from "@/utils/util";
    import { useRouter } from "vue-router";
    const store = useStore()
    const emit = defineEmits(['addReservation','dialogPupVisible'])
    const router = useRouter()
    const props = defineProps({
        dataDrog:{
            type:Array,
            default:()=>[]
        },
        allTime:{
            type:Object,
            default:()=>{}
        },
        isRetrievingReleas:{
            type:Boolean,
            default:()=>false,
        },
        select: Function,
    })
    const popover = ref()
    const state = reactive({
        retrievingReleasWidth:"375px",
        isRetrievingReleasing:'2',
        dataDrog:[],
        isDrog:false,
        newDataDrog:[],
        IntervalFn:undefined,
        allTime:{
            // fristTime:"8:00",
            // endTime:"22:00",
            // projectFristTime:"5:00",
            // projrctEndTime:"23:30",
        },
        leftAllTime:40,
        newLeftAllTime:[],
        toMoveCells:0,
        mindex:0,
        index:0,
        timePeriod:'now',
        // modifiers:{
        //     modifiers: [{
        //         name: 'offset',
        //         options: {
        //             offset: [-205, -10]
        //         }
        //     }]
        // },
        creatTime:null,
    })
    const clickOutside = (e,index,mindex,item,type) => {
        if(type==="1"){
            document.body.click()
        }
        nextTick(()=>{
            let toMove = document.querySelector(".toMove" + mindex + index).querySelector(".toMoveCard");
            let toMove2 = document.querySelector(".toMove" + mindex + index).querySelector(".toMoveContent");
            toMove2.style.background=['','#F3FCF7','#F6F9FF','#FFF8F2','#F3F4F9','#F9F9F9'][item.recordState]
            toMove2.style.color='#000'
        })
    }
    //pc端拖拽
    const dataDrogDown = (e,index,mindex,row) => {
        e.stopPropagation()
        // setTimeout(() => {
        let toMoveAll = document.querySelector(".toMoveAll" + mindex);
        let toMoveBox = document.querySelector(".toMoveBox");
        let toMove = document.querySelector(".toMove" + mindex + index);
        toMove.style.zIndex = 50
        e = e || window.event
        const ol = e.clientX - toMove.offsetLeft
        const ot = e.clientY - toMove.offsetTop
        let firstLeft = e.clientX - ol
        nextTick(()=>{
            function handleMousemove(e2) {
                e2 = e2 || window.event //兼容写法          
                // 获取鼠标坐标
                let left = e2.clientX - ol
                let top = e2.clientY - ot
                toMove.style.left = left + 'px'
                toMove.style.top = top + 'px'
                let timeIndex = Math.trunc((e2.clientY-(e2.clientY - toMove.offsetTop))/30)-1
                let toMoveIndex = Math.trunc(left/136)
                let toBg = document.querySelector(".toBg" + parseInt(toMoveIndex) + timeIndex);
                let toBgOther = document.querySelectorAll(".toBgOther");
                for(let i=0;i<toBgOther.length;i++){
                    toBgOther[i].style.background='#fff'
                }
                toBg.style.background='red'
            };
            toMove.addEventListener('mousemove',handleMousemove)
            function handleMouseup(e3){
                toMove.style.top = Math.trunc((e3.clientY-(e3.clientY - toMove.offsetTop))/30)*30+1 + 'px'
                toMove.style.left = Math.trunc((e3.clientX-(e3.clientX - toMove.offsetLeft))/136)*136 + 'px'
                let timeIndex = Math.trunc((e3.clientY-(e3.clientY - toMove.offsetTop))/30)
                let toBg = document.querySelector(".toBg" + mindex + timeIndex);
                toMove.style.background = '#fff'
                toBg.style.background='#fff'
                toMove.style.zIndex = 1
                toMoveAll.style.zIndex = 10
                let toMoveIndex = toMove.style.left.slice(0,-2)/136
                let fristMoveIndex = Math.trunc(firstLeft/136)
                let projectIndex = _.findIndex(state.newDataDrog[fristMoveIndex].dataDrogItem, { id: row.id })
                state.newDataDrog[toMoveIndex].dataDrogItem.push(state.newDataDrog[fristMoveIndex].dataDrogItem[projectIndex])
                state.newDataDrog[fristMoveIndex].dataDrogItem.splice(projectIndex,1)
                toMove.removeEventListener('mousemove', handleMousemove)
                toMove.removeEventListener('mouseup', handleMouseup)
            }
            toMove.addEventListener('mouseup',handleMouseup)
        })
    }
    //移动端拖拽
    const dataDrogTouch = (e,index,mindex) => {
        e.stopPropagation()
        setTimeout(() => {
            let toMoveAll = document.querySelector(".toMoveAll" + mindex);
            let toMove = document.querySelector(".toMove" + mindex + index);
            toMove.style.zIndex = 50
            toMove.style.background = 'green'
            e = e || window.event
            const ol = e.touches[0].clientX - toMove.offsetLeft
            const ot = e.touches[0].clientY - toMove.offsetTop
            nextTick(()=>{
                function handleMousemove(e) {
                    e = e || window.event //兼容写法        
                    // 获取鼠标坐标
                    let left = e.touches[0].clientX - ol
                    let top = e.touches[0].clientY - ot
                    
                    toMove.style.left = left + 'px'
                    toMove.style.top = top + 'px'
                    let timeIndex = Math.trunc((e.touches[0].clientY-(e.touches[0].clientY - toMove.offsetTop))/30)
                    let toBg = document.querySelector(".toBg" + mindex + timeIndex);
                    let toBgOther = document.querySelectorAll(".toBgOther");
                    for(let i=0;i<toBgOther.length;i++){
                        toBgOther[i].style.background='#fff'
                    }
                    
                    toBg.style.background='red'
                };
                toMove.addEventListener('touchmove',handleMousemove)
                toMoveAll.addEventListener('touchend',function () {
                    toMove.style.top = Math.trunc((e.touches[0].clientY-(e.touches[0].clientY - toMove.offsetTop))/30)*30 + 'px'
                    toMove.style.left = Math.trunc((e.touches[0].clientX-(e.touches[0].clientX - toMove.offsetLeft))/136)*136 + 'px'
                    let timeIndex = Math.trunc((e.touches[0].clientY-(e.touches[0].clientY - toMove.offsetTop))/30)
                    let toBg = document.querySelector(".toBg" + mindex + timeIndex);
                    toMove.style.background = '#fff'
                    toBg.style.background='#fff'
                    toMove.style.zIndex = 0
                    toMove.removeEventListener('touchmove', handleMousemove)
                }) 
            })
        }, 1000);
    }
    //获取时间间隔个数
    const countTime = (time) => {
        if(!time){
            return
        }
        let newArray = time.split(":")
        let time1 = parseFloat(newArray[0])
        let time2 = parseFloat(newArray[1])
        let time3 = time2>0?(time1*4+time2/15):time1*4
        return time3
    }
    const routerSort = (data) => {
        function sortData(a, b) {
            return a.sort - b.sort;
        }
        data.sort(sortData);
    }
    const getOperate = (e,index,mindex,item) => {
        e.preventDefault()
        nextTick(()=>{
            let toMove1 = document.querySelector(".toMove" + state.mindex + state.index).querySelector(".toMoveContent");
            toMove1.style.background = ['','#F3FCF7','#F6F9FF','#FFF8F2','#F3F4F9','#F9F9F9'][state.dataDrog[state.mindex].reserveList[state.index].recordState]
            
            toMove1.style.color = '#000'
            state.mindex = mindex
            state.index = index
            
            let toMove = document.querySelectorAll(".toMoveCard");
            let toMove2 = document.querySelector(".toMove" + mindex + index).querySelector(".toMoveContent");
            
            toMove2.style.background=['','#18BF5B','#5081FF','#FF6B00','#0C268C','#999999'][item.recordState]
            toMove2.style.color='#fff'
        })
        return false
    }
    const getTiming = (type) => {
        state.creatTime = setInterval(function () {
            let date = new Date();
            let hour = date.getHours(); // 时
            let minutes = date.getMinutes(); // 分
            let seconds = date.getSeconds();
            let newFristTime = state.allTime.projectFristTime>state.allTime.fristTime?state.allTime.fristTime:state.allTime.projectFristTime
            let newHour = hour - parseInt(countTime(newFristTime)/4)
            let newTop = newHour*60*2+minutes*2
            let timeLine = document.querySelector(".timeLine");
            if(newSeconds==0){
                console.log("整点",newSeconds)
            }else{
                var newSeconds = 60 - seconds
                // var newSeconds = 3
                var timer;
                function countDown(){
                    newSeconds--
                    if(newSeconds == 0){
                        clearTimeout(timer)
                        timeLine.style.top = (newTop+48)+'px'
                        return
                    }
                    timer = setTimeout(()=>{
                        countDown()
                    }, 1000);
                }
                countDown()
            }
            if(type==2){
                return
            }
        }, 60000);
    }
    
    const countAllTime = (allTime) => {
        state.newLeftAllTime = []
        let newFristTime = allTime.projectFristTime>allTime.fristTime?allTime.fristTime:allTime.projectFristTime
        let newEndTime = allTime.projrctEndTime>allTime.endTime?allTime.projrctEndTime:allTime.endTime
        let fristTime = countTime(newFristTime)/2
        let endTime = countTime(newEndTime)/2
        let itemTime = fristTime-1
        for(let i=0;i<=(endTime-fristTime);i++){
            itemTime++
            if(allTime.projectFristTime<allTime.fristTime||allTime.projrctEndTime>allTime.endTime){
                if(i<(countTime(allTime.fristTime)-countTime(allTime.projectFristTime))/2||i>(countTime(allTime.endTime)-countTime(allTime.projectFristTime))/2){
                    nextTick(()=>{
                        let timeJiange = document.querySelector(".timeStickyList"+i);
                        timeJiange.style.color = "#ddd"
                    })
                }
            }
            let addItemTime = Number.isInteger((itemTime)/2)?parseInt(itemTime/2)+":00":parseInt(itemTime/2)+":30"
            state.newLeftAllTime.push(addItemTime)
        }
    }
    const fristTimeLine = () => {
        let date = new Date();
        let hour = date.getHours(); // 时
        let minutes = date.getMinutes(); // 分
        let seconds = date.getSeconds();
        let newFristTime = state.allTime.projectFristTime>state.allTime.fristTime?state.allTime.fristTime:state.allTime.projectFristTime
        let newHour = hour - parseInt(countTime(newFristTime)/4)
        let newTop = newHour*60*2+minutes*2
        nextTick(()=>{
            let timeLine = document.querySelector(".timeLine");
            timeLine.style.top = (newTop+46)+'px'
            let containerBox = document.querySelector(".containerBox");
            let container = document.querySelector(".container");
            if(minutes>30){
                container.scrollTop = newHour*60*2
            }else{
                container.scrollTop = newHour*60*2-60
            }
        })
    }
    //预约弹窗
    const editReservation = (type,item) => {
        emit("addReservation", type,item);
    }
    const confirmPopup = (e,index,mindex,item,type) => {
        emit("dialogPupVisible", true,index,mindex,item,type);
    }
    const jumpPage = (type,item) => {
        let produtcIds = []
        item.reserveList.map(item=>{
            let { orderId,projectId,isPackage,employeeId } = item
            produtcIds.push({orderId,productId:projectId,sourceType:isPackage?5:2,commissionUserId:employeeId})
        })
        let params = {
            appointmentId:item.id,
            memberId:item.memberId,
            productIds:JSON.stringify(produtcIds),
        }
        if(type===1){
            router.push({
                path: '/cashier',
                query: params
            })
        }else if(type===3){
            let ids = item.verifyIds.split(",")
             ElMessageBox.confirm("确认通过该审核吗？", "提示", {
                confirmButtonText: "审核",
                cancelButtonText: "取消",
                type: "warning",
            })
            .then(() => {
                let data = {
                    id: ids,
                    verifyStatus:1,
                }
                passOrReject(data).then(()=>{
                    props.select(store.state.common.dayDate|| moment().format(' YYYY-MM-DD'));
                })
            })
            .catch((error) => {
                let data = {
                    id: ids,
                    verifyStatus:2,
                }
                passOrReject(data).then(()=>{
                    props.select(store.state.common.dayDate|| moment().format(' YYYY-MM-DD'));
                })
            });
            // router.push({
            //     path: '/revenue-records/write-off-records',
            //     query:data
            // })
        }else{
            router.push({
                path: '/member',
                query: {
                    memberId:item.memberId,
                    path:'19',
                }
            })
        }
    }
    const modifiers = (recordState) => {
        let newTop = 0
        if(recordState===1){
            newTop = -(4*50+5)
        }else if(recordState===2){
            if(store.state.userInfo.info.roleList.includes('store_master')){
                newTop = -(3*50+5)
            }else{
                newTop = -(2*50+5)
            }
            
        }else if(recordState===3||recordState===4){
            newTop = -(2*50+5)
        }else{
            newTop = -(50+5)
        }
        return {modifiers: [{name: 'offset',options: {offset: [newTop, -10]}}]}
    }
    util.$on('timeChange',data=>{
        if(data){
            let toDay = moment().startOf('day').format('YYYY-MM-DD')
            let toDayHM = moment(toDay).startOf('day').format('x')
            let getDateHM = moment(data).startOf('day').format('x')
            console.log(toDayHM,getDateHM,123123)
            countAllTime(state.allTime)
            if(toDayHM>getDateHM){
                state.timePeriod = 'over'
            }else if(toDayHM==getDateHM){
                state.timePeriod = 'now'
            }else{
                state.timePeriod = 'future'
            }
        }
        clearTimer()
    })
    watch(
        () => state.isRetrievingReleasing,
        (val, bef) => {
            fristTimeLine()
            getTiming()
        }
    )
    watch(
        () => props.isRetrievingReleas,
        (val, bef) => {
            if(val){
                state.retrievingReleasWidth = "383px"
            }else{
                state.retrievingReleasWidth = "140px"
            }
        }
    )
    watch(
        () => props.dataDrog,
        (val, bef) => {
            state.dataDrog = props.dataDrog
            state.allTime = props.allTime
            if(state.allTime.projectFristTime==''&&state.allTime.fristTime){
                state.allTime.projectFristTime = state.allTime.fristTime
                state.allTime.projrctEndTime = state.allTime.endTime
            }else if(state.allTime.fristTime==''){
                state.allTime.fristTime = '00:00'
                state.allTime.endTime = '23:30'
                state.allTime.projectFristTime = '00:00'
                state.allTime.projrctEndTime = '23:30'
            }
            countAllTime(state.allTime)
            state.dataDrog.map(item=>{
                if(item.reserveList.length){
                    item.reserveList.map((dataDrogItem,dataDrogIndex)=>{
                        let newFristTime = state.allTime.projectFristTime>state.allTime.fristTime?state.allTime.fristTime:state.allTime.projectFristTime
                        let newTime = countTime(dataDrogItem.reserveList[0].restTimeStart)-countTime(newFristTime)
                        dataDrogItem.timeSlot = newTime
                        dataDrogItem.totalTime = 0
                        dataDrogItem.reserveList.map((reserveListItem,index)=>{
                            let newDuration = countTime(reserveListItem.restTimeEnd)-countTime(reserveListItem.restTimeStart)
                            dataDrogItem.totalTime = parseInt(newDuration)+parseInt(dataDrogItem.totalTime)
                        })
                        
                    })
                } 
            })
            state.toMoveCells = (state.newLeftAllTime.length-1)*2
            routerSort(state.dataDrog)//排序
            fristTimeLine()
        getTiming()
        state.newDataDrog = _.cloneDeep(state.dataDrog)
        }
    )
    const goScheduling = () => {
        router.push({
            path: '/schedule',
        })
    }
    onMounted(()=>{
    })
    const clearTimer = () => {
        for(let i=1;i<=state.creatTime;i++){
            clearInterval(i);
        }
    }
    onBeforeUnmount(()=>{
        clearTimer()        
    })
    defineExpose({
        state
    })
    const { dataDrog,leftAllTime,newLeftAllTime,toMoveCells,timePeriod,isRetrievingReleasing,retrievingReleasWidth } = toRefs(state)
</script>
<style lang="scss" scoped>
    .container{
        overflow:auto;
        height: calc(100vh - 160px);
        // width: calc(100vw - 374px);
        border-radius:20px;
        background: #fff;
        width: 100%;
        .containerBox{
            display:flex;
            // height:3000px;
            border-radius:20px;
            .timeSticky{
                // padding-top:46px;
                position:sticky;
                left:0;
                z-index:1800;
                background:#fff;
                width: 63px;
                box-shadow: 1.78px 1.78px 8.89px 0 #0c268c33;
                .timeStickyList{
                    height:60px;
                    font-family: "DIN";
                    text-align:center;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 16px;
                    font-size: 16px;
                }
                .timeStickyCover{
                    background: #fff;
                    width: 63px;
                    height: 46px;
                    position: sticky;
                    top: 0;
                }
            }
            .toMoveBox{
                height:100%;
                display:flex;
                position:relative;
                box-sizing:content-box;
                background: #fff;
                border-top-right-radius:20px;
                border-bottom-right-radius:20px;
                .dataDrogList{
                    border-right:1px solid #999999;
                    width:136px;
                    box-sizing:content-box;
                    .dataDrogTitle{
                        height:46px;
                        position:sticky;
                        top: 0;
                        background:#fff;
                        z-index:1000;
                        cursor:pointer;
                        width:136px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        // border-right:1px solid #999999;
                        box-shadow: 1.78px 1.78px 8.89px 0 #0c268c33;
                        .dataDrogName{
                            font-family: "PingFang SC";
                            font-size: 18px;
                            font-style: normal;
                            font-weight: 600;
                            line-height: 18px;
                            margin-right:2px ;
                             white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                        .dataDrogIcon{
                            width: 20px;
                            height: 20px;
                            flex-shrink: 0;
                            // background: #FDAA29;
                            font-size: 14px;
                            border-radius: 50%;
                            text-align: center;
                            line-height: 20px;
                            color: #fff;
                            font-style: normal;
                            font-weight: 500;
                            line-height: 20px;
                            // position: absolute;
                            // top: 0px;
                        }
                    }
                    .toMove{
                        width:120px;
                        height:136px;
                        position:absolute;
                        z-index:1;
                        background:#fff;
                        margin:0 8px;
                        .toMoveCard{
                            border-radius: 8px;
                            border:1px solid  #EEE;
                            background: #FFF8F2;
                            display: flex;
                            .toMoveLine{
                                width: 4px;
                                height: 60px;
                                flex-shrink: 0;
                                border-radius: 8px 0 0 8px;
                            }
                            .toMoveContent{
                                padding: 8px 12px 2px 12px;
                                border-radius: 0 8px 8px 0;
                                color: #000000;
                                .toMoveName{
                                    width: 96px;
                                    font-family: "PingFang SC";
                                    font-size: 16px;
                                    font-style: normal;
                                    font-weight: 600;
                                    line-height: 16px;
                                    border-bottom: 1px solid #eee;
                                    padding-bottom:5px;
                                }
                                .toMoveName2{
                                    width: 48px;
                                    font-family: "PingFang SC";
                                    font-size: 16px;
                                    font-style: normal;
                                    font-weight: 600;
                                    line-height: 16px;
                                    overflow:hidden;
                                    text-overflow:ellipsis;
                                    white-space:nowrap;
                                }
                                .toMoveCustom2{
                                    width: 48px;
                                    font-family: "PingFang SC";
                                    font-size: 14px;
                                    font-style: normal;
                                    font-weight: 500;
                                    line-height: 16px;
                                    text-align: right;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }
                                .toMoveCustom{
                                    width: 96px;
                                    font-family: "PingFang SC";
                                    font-size: 14px;
                                    font-style: normal;
                                    font-weight: 500;
                                    line-height: 14px;
                                    padding-top:5px;
                                }
                            }
                        }
                    }
                }
                .timeLine{
                    height:1px;
                    // width:calc(100% - 63px);
                    position:absolute;
                    top:30px;
                    z-index:999;
                    background: #5081FF;
                    margin-left:63px;
                }
            } 
        }
    }
    .toMove:hover{
        cursor:pointer;
    }
    *{
        -webkit-touch-callout:none; /*系统默认菜单被禁用*/
        -webkit-user-select:none; /*webkit浏览器*/
        -khtml-user-select:none; /*早期浏览器*/
        -moz-user-select:none;/*火狐*/
        -ms-user-select:none; /*IE10*/
        user-select:none;
    }
    .toBgOther{
        height:30px;
        box-sizing: border-box;
        background: #fff;
    }
    .toBgOther:nth-child(even){
        border-bottom:1px solid #E5EBF0;
    }
    .toShowActive{
        display: flex;
    }
    .toShow{
        display:none;
        background:#fff;
        width:120px;
        height:200px;
        position:absolute;
        top:-177px;
        left:102px;
        border-radius: 10px 10px 10px 0;
        box-shadow: 2px 2px 10px rgba(12,38,140,0.2);
    }
    .textBtnBox{
        .textBtn{
            font-family: "PingFang SC";
            font-size: 16px;
            font-style: normal;
            font-weight: 500;
            line-height: 16px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .textBtnSee{
            color: #3480FF;
        }
        .textBtnEdit{
            color: #FF6B00;
        }
        .textBtnReach{
            color: #18BF5B;
        }
        .textBtnCancel{
            color:#FF2440;
        }
    }
    .goScheduling{
        color:#3480ff;
        font-family:'PingFang SC';
        font-size:16px;
        font-weight:500;
    }
    .goScheduling:hover{
        cursor: pointer;
    }
    .isPointer{
        cursor: pointer;
    }
    .two_line {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
</style>